<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div th:replace="themes/pinghsu/header::header(${activity.activityName},null)"></div>
<head>
    <!-- 添加需要的CSS -->
    <link rel="stylesheet" th:href="@{/plugins/toast/jquery.toast.css}">
</head>
<body>
<div class="main-content activity-detail clearfix">
    <div class="activity-header">
        <h1 class="activity-title" th:text="${activity.activityName}"></h1>
        <div class="activity-meta">
            <span class="activity-time">
                <i class="fa fa-calendar"></i> 
                <span th:text="${#dates.format(activity.startTime, 'yyyy-MM-dd HH:mm')}"></span>
                <span th:if="${activity.endTime != null}">
                    至 <span th:text="${#dates.format(activity.endTime, 'yyyy-MM-dd HH:mm')}"></span>
                </span>
            </span>
            <span class="activity-address" th:if="${activity.activityAddress != null}">
                <i class="fa fa-map-marker"></i> 
                <span th:text="${activity.activityAddress}"></span>
            </span>
            <span class="activity-participants">
                <i class="fa fa-users"></i> 
                <span id="participantCount" th:text="${activity.participantCount ?: 0}"></span> 人参与
            </span>
        </div>
    </div>
    
    <div class="activity-content">
        <div class="activity-cover" th:if="${activity.coverImage != null}">
            <img th:src="${activity.coverImage}" alt="活动封面">
        </div>
        
        <div class="activity-description">
            <h3>活动详情</h3>
            <div th:utext="${activity.activityDescription ?: '暂无详细描述'}"></div>
        </div>
        
        <div class="activity-actions text-center">
            <button th:if="${activity.isParticipating}" id="quitBtn" class="btn btn-outline-blue" th:data-id="${activity.activityId}">取消参与</button>
            <button th:unless="${activity.isParticipating}" id="joinBtn" class="btn btn-blue" th:data-id="${activity.activityId}">立即参与</button>
        </div>
        
        <div class="activity-participants-section">
            <h3>参与人员 (<span th:text="${activity.participantCount ?: 0}"></span>)</h3>
            <div class="participants-list">
                <div th:if="${participants.isEmpty()}" class="no-participants">
                    <p>暂无人员参与，快来成为第一个参与者吧！</p>
                </div>
                
                <div th:unless="${participants.isEmpty()}" class="participants-container">
                    <div class="participant" th:each="user : ${participants}">
                        <div class="participant-avatar">
                            <img th:src="${user.userAvatar != null ? user.userAvatar : '/static/img/Headportrait.jpg'}" alt="用户头像">
                        </div>
                        <div class="participant-name" th:text="${user.userDisplayName ?: user.userName}"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:inline="javascript">
$(function() {
    // 参与活动
    $('#joinBtn').click(function() {
        var activityId = $(this).data('id');
        
        $.ajax({
            url: '/activities/join/' + activityId,
            type: 'POST',
            success: function(result) {
                if (result.success) {
                    // 隐藏参与按钮，显示退出按钮
                    $('#joinBtn').hide();
                    $('#quitBtn').show();
                    
                    // 更新参与人数
                    var count = parseInt($('#participantCount').text()) + 1;
                    $('#participantCount').text(count);
                    $('.activity-participants-section h3').html('参与人员 (' + count + ')');
                    
                    // 重新加载页面获取最新的参与者列表
                    location.reload();
                    
                    // 显示成功消息
                    showMsg(result.msg, "success", 2000);
                } else {
                    // 登录失效或其他错误
                    if (result.msg.indexOf('登录') >= 0) {
                        window.location.href = '/user/login';
                    } else {
                        showMsg(result.msg, "error", 2000);
                    }
                }
            },
            error: function() {
                showMsg("操作失败，请重试", "error", 2000);
            }
        });
    });
    
    // 退出活动
    $('#quitBtn').click(function() {
        var activityId = $(this).data('id');
        
        $.ajax({
            url: '/activities/quit/' + activityId,
            type: 'POST',
            success: function(result) {
                if (result.success) {
                    // 隐藏退出按钮，显示参与按钮
                    $('#quitBtn').hide();
                    $('#joinBtn').show();
                    
                    // 更新参与人数
                    var count = parseInt($('#participantCount').text()) - 1;
                    count = count < 0 ? 0 : count;
                    $('#participantCount').text(count);
                    $('.activity-participants-section h3').html('参与人员 (' + count + ')');
                    
                    // 重新加载页面获取最新的参与者列表
                    location.reload();
                    
                    // 显示成功消息
                    showMsg(result.msg, "success", 2000);
                } else {
                    // 登录失效或其他错误
                    if (result.msg.indexOf('登录') >= 0) {
                        window.location.href = '/user/login';
                    } else {
                        showMsg(result.msg, "error", 2000);
                    }
                }
            },
            error: function() {
                showMsg("操作失败，请重试", "error", 2000);
            }
        });
    });
});
</script>

<style>
.activity-detail {
    padding: 30px 0;
    max-width: 960px;
    margin: 0 auto;
}
.activity-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}
.activity-title {
    font-size: 32px;
    margin: 0 0 15px;
    color: #3d4450;
}
.activity-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    color: #888;
    font-size: 15px;
}
.activity-meta span {
    margin: 0 15px;
}
.activity-meta i {
    margin-right: 5px;
}
.activity-content {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    padding: 30px;
}
.activity-cover {
    margin-bottom: 30px;
    text-align: center;
}
.activity-cover img {
    max-width: 100%;
    max-height: 400px;
    border-radius: 8px;
}
.activity-description {
    margin-bottom: 30px;
    line-height: 1.8;
    color: #3d4450;
}
.activity-description h3 {
    font-size: 22px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}
.activity-actions {
    margin-bottom: 40px;
}
.btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
}
.btn-blue {
    background-color: #6fa3ef;
    color: white;
    border: none;
}
.btn-blue:hover {
    background-color: #5a92e0;
}
.btn-outline-blue {
    background-color: transparent;
    border: 1px solid #6fa3ef;
    color: #6fa3ef;
}
.btn-outline-blue:hover {
    background-color: #6fa3ef;
    color: white;
}
.activity-participants-section h3 {
    font-size: 22px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}
.participants-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.participant {
    text-align: center;
    width: 80px;
}
.participant-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 5px;
    border: 2px solid #f5f5f5;
}
.participant-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.participant-name {
    font-size: 14px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.no-participants {
    text-align: center;
    padding: 20px 0;
    color: #888;
}
.text-center {
    text-align: center;
}

@media (max-width: 768px) {
    .activity-detail {
        padding: 20px 15px;
    }
    .activity-title {
        font-size: 26px;
    }
    .activity-meta {
        flex-direction: column;
        align-items: center;
    }
    .activity-meta span {
        margin: 5px 0;
    }
    .activity-content {
        padding: 20px;
    }
}
</style>

<!-- 添加需要的JS -->
<script th:src="@{/js/mayday.js}"></script>
<script th:src="@{/plugins/toast/jquery.toast.js}"></script>

</body>
<div th:replace="themes/pinghsu/footer::footer"></div>
</html>
